<template>
	<div :class="mode">
		<div class="layout">
			<img class="img" src="@/assets/imgs/image.png" alt="" />
			<div class="main">
				<!-- 标题 -->
				<div class="main-title">
					<div class="main-title-new" v-if="showNew">NEW</div>
					<div class="main-title-hot" v-if="showHot">HOT</div>
					<p class="main-title-text hover">
						楽天市場での店舗名変更方法とは？売れ222での店舗名変更方法とは？売れ舗名変更方法とは？売れ舗名変更方法とは？売れ222での店舗名変更方法とは？売れ2222
					</p>
				</div>
				<!-- 正文 -->
				<div class="main-content" v-if="mode === 'pc'">
					 <span
						>副業で中国から商品を仕入れ、フリマアプリやネットショップで販売アプリやネットショップで販売する人が増えていアプリやネットショップで販売する人が増えていアプリやネットショップで販売する人が増えていする人が増えています。こうした営利目的の取引を継続的に行っていると、税務上は「事業」とみなされ、確定申告が必要になる場合があります。2025年には、高級車の転売を巡って約5億円の申告漏れが報じられ、大きな話題となりました。 </span
					>
				</div>
				<!-- 其他信息 -->
				<div class="main-other" v-if="mode === 'pc'">
					<div class="main-other-tags">
						<div class="main-other-tags-item" v-for="(value, index) in arr.slice(0, showBtnCount)">
							<div v-if="index === showBtnCount - 1">
								{{ arr.length > showBtnCount ? `共${arr.length}个` : value }}
							</div>
							<div v-else>
								{{ value }}
							</div>
						</div>
					</div>
					<div class="main-other-time">
						<span class="gray">更新时间：</span>
						<span class="black">2025-02-03 15:20</span>
					</div>
				</div>
				<!-- 其他信息 pc-sm -->
				<div class="main-other" v-if="mode === 'pc-sm'">
					<span class="gray">2025-01-12 14:20</span>
				</div>
				<!-- 其他信息移动端 -->
				<div class="main-other" v-if="mode === 'mobile'">
					<span class="gray">更新时间：</span>
					<span class="black">2025-02-03 15:20</span>
				</div>
			</div>
		</div>
		<div class="tags" v-if="mode === 'mobile' && !showHot">
			<div class="tags-item" v-for="(value, index) in arr.slice(0, 4)">
				<div v-if="index === 3">
					{{ arr.length > 4 ? `共${arr.length}个` : value }}
				</div>
				<div v-else>
					{{ value }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	// mode 'pc' | 'pc-sm' | 'mobile'
	const props = defineProps({
		mode: {
			type: String,
			default: 'pc',
		},
		showNew: {
			type: Boolean,
			default: false,
		},
		showHot: {
			type: Boolean,
			default: false,
		},
	});
	const arr = new Array(10).fill('中国输入');
	const showBtnCount = ref(0);
	// 根据宽度计算显示的标签数量：
	// 在 1920 到 1440 之间，每减少 120px，数量减 1；最少为 3
	function updateShowBtnCount(width) {
		nextTick(() => {
			if (width >= 1920) {
				showBtnCount.value = 5;
			} else if (width >= 1440) {
				const drop = Math.floor((1920 - width) / 120);
				showBtnCount.value = Math.max(3, 5 - drop);
			}
		});
	}

	if (import.meta.client) {
		// 初始化
		updateShowBtnCount(window.innerWidth);
		// 监听视口宽度变化
		const observer = new ResizeObserver(entries => {
			for (const entry of entries) {
				if (entry.target === document.documentElement) {
					const width = entry.contentRect.width;
					updateShowBtnCount(width);
				}
			}
		});
		observer.observe(document.documentElement);
		onBeforeUnmount(() => observer.disconnect());
	}
</script>

<style lang="scss" scoped>
	// 最外层
	$outermostPadding: 10px;
	$outermostWidth: 1024px;
	$outermostHeight: 150px;
	$mainHeight: 130px;
	.pc,
	.pc-sm {
		.layout {
			&:hover {
				.hover {
					color: var(--issue-text-hover-color) !important;
				}
			}
		}
	}
	.pc,
	.pc-sm,
	.mobile {
		cursor: pointer;
		border-radius: var(--blog-box-radius);
	}

	/* 抽离公共样式：PC 与 Mobile 共用 */
	/* 图片圆角 */
	.pc .layout .img,
	.pc-sm .layout .img,
	.mobile .layout .img {
		border-radius: var(--blog-box-radius);
	}

	/* 标题徽标的通用样式（热 / 新）*/
	.main-title-new,
	.main-title-hot {
		color: white;
		border-radius: var(--blog-box-radius);
	}

	/* 标签项通用样式（PC 列表标签 + Mobile 标签）*/
	.pc .main .main-other .main-other-tags .main-other-tags-item,
	.mobile .tags .tags-item {
		border-radius: var(--blog-box-radius);
		background-color: var(--blog-box-bg-color-gray);
		@include flex();
		@include text-overflow();
	}
	.pc {
		.layout {
			// width: $outermostWidth;
			@include scaleWidth($outermostWidth, 780px);
			height: $outermostHeight;
			padding: $outermostPadding;
			@include flex(_, flex-start);
			border-radius: var(--blog-box-radius);
			&:hover {
				background-color: var(--blog-box-bg-hover-color-blue);
			}
			.img {
				// width: 240px;
				@include scaleWidth(240px, 200px);
				height: $mainHeight;
				margin-right: 15px;
				border-radius: var(--blog-box-radius);
			}
			.main {
				@include text-overflow(2);
				@include flex(column, space-between, normal);
				height: $mainHeight;
				.main-title {
					@include flex(_, flex-start);
					.main-title-new,
					.main-title-hot {
						width: 60px;
						height: 24px;
						margin-right: 8px;
						text-align: center;
						color: white;
						border-radius: var(--blog-box-radius);
						flex: 0 0 60px;
					}
					.main-title-new {
						background-color: var(--blog-box-bg-color-blue);
					}
					.main-title-hot {
						background-color: var(--blog-box-bg-color-red);
					}
					.main-title-text {
						@include font(_, 20, 28px, 500, var(--blog-normal-text-color));
						@include text-overflow();
					}
				}
				.main-content {
					margin-top: 10px;
					margin-bottom: 15px;
					flex-wrap: wrap;
					@include font(_, 14px, 22px, 400, var(--blog-content-text-color));
					@include text-overflow(2);
				}
				.main-other {
					@include flex(_, space-between, flex-end);
					.main-other-tags {
						@include flex(_, flex-start);
						.main-other-tags-item {
							width: 100px;
							height: 28px;
							margin-right: 10px;
							padding: 4px;
							border-radius: var(--blog-box-radius);
							@include flex();
							@include text-overflow();
							@include font(_, 12px, 20px, 400, var(--blog-tag-text-color));
							background-color: var(--blog-box-bg-color-gray);
							&:last-child {
								margin-right: 0;
							}
							div {
								@include text-overflow();
							}
						}
					}
					.main-other-time {
						@include font(_, 12px, 20px, 400);
					}
				}
			}
		}
	}
	// pc-小的
	.pc-sm {
		.layout {
			// width: 324px;
			@include scaleWidth(324px, 294px);
			height: 60px;
			@include flex();
			overflow: hidden;
			padding: 0;
			.img {
				width: 90px;
				height: 60px;
				margin-right: 10px;
				border-radius: var(--blog-box-radius);
			}
			.main {
				@include text-overflow(2);
				@include flex(column, space-between, normal);
				height: 60px;
				.main-title {
					margin-bottom: 10px;
					@include font(_, 14px, 20px, 400, var(--blog-normal-text-color));
					@include text-overflow(2, 'float');
					.main-title-hot {
						width: 41px;
						height: 18px;
						border-radius: var(--blog-box-radius);
						background-color: var(--blog-box-bg-color-red);
						@include flex();
						@include font(_, 12px, 22px, 900, white);
						margin-right: 8px;
						float: left;
					}
					.main-title-text {
						@include font(_, 14px, 20px, 400, var(--blog-normal-text-color));
					}
				}
				.main-other {
					@include font(_, 12px, 11px, 400);
				}
			}
		}
	}
	// 移动端
	.mobile {
		// width: 710px;
		@include mobileVwCalc(710px);
		// height: 220px;
		padding: 20px;
		border-radius: 10px;
		background-color: white;
		.layout {
			@include flex;
			margin-bottom: 13px;
			padding: 0;
			.img {
				// width: 220px;
				@include mobileVwCalc(220px);
				height: 130px;
				margin-right: 20px;
				border-radius: var(--blog-box-radius);
			}
			.main {
				@include flex(column, space-between, normal);
				height: 130px;
				.main-other {
					@include font(_, 20px, 20px, 400);
				}
				.main-title {
					@include text-overflow(2, 'float');
					.main-title-new,
					.main-title-hot {
						width: 60px;
						height: 28px;
						margin-right: 12px;
						@include flex();
						@include font(_, 20px, 28px, 700, white);
						float: left;
						border-radius: var(--blog-box-radius);
						transform: translateY(6px);
					}
					.main-title-hot {
						background-color: var(--blog-box-bg-color-red);
					}
					.main-title-new {
						background-color: var(--blog-box-bg-color-blue);
					}
					.main-title-text {
						@include font(_, 28px, 36px, 500, var(--blog-normal-text-color));
						// transform: translateY(-6px);
					}
				}
			}
		}
		.tags {
			@include flex(_, flex-start);
			.tags-item {
				// width: 152px;
				@include mobileVwCalc(152px);
				height: 36px;
				margin-right: 20px;
				padding: 4px;
				border-radius: var(--blog-box-radius);
				@include flex();
				@include text-overflow();
				@include font(_, 20px, 20px, 350, var(--blog-tag-text-color));
				background-color: var(--blog-box-bg-color-gray);
				&:last-child {
					margin-right: 0;
				}
				div {
					@include text-overflow();
				}
			}
		}
	}
	.gray {
		color: var(--issue-text-content-gray);
	}
	.black {
		color: var(--issue-text-content-black);
	}
</style>
